<template>
  <div class="page-monitor">
    <!-- 图表容器 -->
    <div class="box"></div>

    <div class="box2"></div>
  </div>
</template>

<script>
// 通过默认导入的方式去引入一个模块,
//  如果该模块内部没有 export default 默认导出，则下面代码会报错
// import apiProduct from "@/api/product";

// 可以通过 * 将一个模块内所有的具名导出拼接到一个对象上获取到
// import * as apiProduct from "@/api/product";

// 引入 echarts
import * as echarts from "echarts";

export default {
  mounted() {
    // 实例化 echarts 实例对象
    const myChart = echarts.init(document.querySelector(".box"));

    // 调用 实例对象的 setOption 方法去配置图表信息
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
        show: false,
      },
      // tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
        {
          name: "销量2",
          type: "bar",
          data: [1, 2, 3, 4, 5, 6],
        },
        {
          name: "库存",
          type: "line",
          data: [10, 25, 40, 20, 20, 30],
        },
      ],
    });

    const myChart2 = echarts.init(document.querySelector(".box2"));
    myChart2.setOption({
      yAxis: {
        // 类目轴，默认 xAxis 才是类目轴
        type: "category",
        inverse: true, // 反向坐标轴
        data: ["一月", "二月", "三月"],
      },
      xAxis: {
        type: "value",
      },
      series: [
        {
          name: "花销",
          type: "bar",
          data: [50, 150, 250],
        },
      ],
    });
  },
};
</script>

<style lang="scss" scoped>
.box,
.box2 {
  width: 400px;
  height: 300px;
  border: 1px solid #000;
}
</style>
